<template>
  <BwComList
    ref="basecom"
    receivClass="bw-base-com-list"
    :com-list="curComList"
  />
</template>

<script lang="ts" setup>
import { ref, unref, computed } from 'vue'
import { baseComList } from './config'
import { useComDesignStoreWithOut } from '@/store'

import {
  BwComTypeEnum,
  BwCustomComFrontTypeEnum,
} from '@bitwit/base-com-render'

import BwComList from '../group/index.vue'

import { BwComGroupModel } from '../model'

const basecom = ref()
const designStore = useComDesignStoreWithOut()

const iosComTypes = [BwComTypeEnum.vant, BwComTypeEnum.html, BwComTypeEnum.vue]
const androidComTypes = [
  BwComTypeEnum.vant,
  BwComTypeEnum.html,
  BwComTypeEnum.vue,
]
const pcComTypes = [
  BwComTypeEnum.ant,
  BwComTypeEnum.html,
  BwComTypeEnum.vue,
  BwComTypeEnum.vxe,
]

const curComList = computed(() => {
  let list: Array<BwComGroupModel> = []
  const type = designStore.curFrontType

  switch (type) {
    case BwCustomComFrontTypeEnum.pc: {
      list = getComList(pcComTypes)
      break
    }
    case BwCustomComFrontTypeEnum.ios: {
      list = getComList(iosComTypes)
      break
    }
    case BwCustomComFrontTypeEnum.android: {
      list = getComList(androidComTypes)
      break
    }
  }
  return list
})

const getComList = (types: Array<BwComTypeEnum>) => {
  const list: Array<BwComGroupModel> = []
  if (Array.isArray(baseComList) && baseComList.length) {
    baseComList.forEach((item) => {
      const coms = item.coms.filter((n) => types.includes(n.type))
      if (Array.isArray(coms) && coms.length) {
        list.push({ ...item, coms })
      }
    })
  }

  return list
}

defineExpose({
  initSortable() {
    const ele = unref(basecom)
    if (ele) {
      ele.initSortable()
    }
  },
})
</script>

<style lang="less" scoped></style>
